<template>
  <div>
      <footer>
          <div class="foot border-top-1px">
              <div class="item" v-for="(item,index) of items" @click="$router.push(item.push)">
                  <div class="img_box">
                      <img :src="index === idx ? item.iconSelect : item.icon" alt="">
                  </div>
                  <p :class="{on:index === idx}">{{item.name}}</p>
              </div>
          </div>
      </footer>
  </div>
</template>
<script>

export default {
    props:["idx"],
    data(){
        return{
            items:[
                {
                    cls:"index",
                    name:"首页",
                    push:"/",
                    icon:require("../assets/insex_icon@2x.png"),
                    iconSelect:require("../assets/insex_icon_c@2x.png")
                },
                {
                    cls:"index",
                    name:"商家圈",
                    push:"/dynamic",
                    icon:require("../assets/circle_icon@2x.png"),
                    iconSelect:require("../assets/circle_icon_c@2x.png")
                },
                {
                    cls:"index",
                    name:"攻略",
                    push:"/businessindex",
                    icon:require("../assets/businessindex_icon@2.png"),
                    iconSelect:require("../assets/businessindex_selct_icon@2.png")
                },
                {
                    cls:"index",
                    name:"我的",
                    push:"/PersonalCenter",
                    icon:require("../assets/my_icon@2x.png"),
                    iconSelect:require("../assets/my_icon_c@2x.png")
                }
            ]
        }
    },
    methods:{

    },
    components:{

    }
}
</script>
<style scoped>
.foot{
    position: fixed;
    left: 0;
    bottom: 0;
    height: 1.96rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #FFFFFF;
    z-index: 99;
}
.foot .item{
    flex: 1;
}
.foot .item .img_box{
    width: 1rem;
    height: 1rem;
    overflow: hidden;
    margin: 0 auto;
}
.foot .item .img_box img{
    width: 100%;
    height: 100%;
}
.foot .item p{
    font-size: .4rem;
    color: #000000;
    font-weight: 500;
    margin-top: .2rem;
}
/* .foot .item .on{
    color: #56D35E;
} */
</style>
